<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>项目变更</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/lib/layui/layui/css/layui.css"/>
    <script type="text/javascript" src="/js/news/jquery-1.9.1.js"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery/jquery.cookie.js"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/js/common/fileupload.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/layui.all.js"></script>
</head>
<style>
    .mbox {
        padding: 8px
    }

    .item img {
        height: 40px;
    }

    .btn {
        height: 30px;
    }

    .btn button {
        float: right;
    }

    .information {
        background: #e8f4fc;
        height: 30px;
        line-height: 30px;
    }

    .layui-form-item {
        margin-bottom: 5px;
    }
</style>
<body>
<div class="mbox">
    <div class="item">
        <img src="../img/yeji.png" alt="" style="margin: 0 5px 0 20px;"> <span
            style="font-size: 22px;display: inline-block;vertical-align: middle;">项目变更</span>
    </div>
    <hr class="layui-bg-blue">
    <div class="btn">
        <button type="button" class="layui-btn layui-btn-sm" style="background: #2b7fe0;margin-left:20px"><i
                class="layui-icon layui-icon-upload-drag" style="vertical-align: inherit"></i>导出
        </button>
        <button type="button" class="layui-btn layui-btn-sm" style="background: #2b7fe0;margin-left: 20px;"><i
                class="layui-icon layui-icon-addition"></i>批量审核
        </button>
        <button type="button" class="layui-btn layui-btn-sm" style="background: #2b7fe0;margin-left: 20px;"><i
                class="layui-icon layui-icon-ok"></i>不通过
        </button>
        <button type="button" class="layui-btn layui-btn-sm" style="background: #2b7fe0;margin-left: 20px;"><i
                class="layui-icon layui-icon-close"></i>通过
        </button>
        <button type="button" class="layui-btn layui-btn-sm" style="background: #2b7fe0;margin-left: 20px;"><i
                class="layui-icon layui-icon-search"></i>查询
        </button>
        <button type="button" class="layui-btn layui-btn-sm tijiao" style="background: #2b7fe0;margin-left: 20px;"><i
                class="layui-icon layui-icon-addition"></i>提交
        </button>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<div id="a" style="margin: 20px;display: none">
    <form class="layui-form" action="">
        <h3 class="information" style="margin-bottom:10px;">【开题报告】</h3>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">变更日期：</label>
            <div class="layui-input-inline">
                <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">变更事项：</label>
            <div class="layui-input-inline">
                <select name="modules" lay-verify="required" lay-search="">
                    <option value="">请选择</option>
                    <option value="1">layer</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">变更说明：</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传</label>
            <div class="layui-input-block">
                <input type="file" name="username" class="layui-input">
            </div>
        </div>
    </form>

</div>
</body>
</html>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script>
    layui.use(['table', 'form', 'laydate','upload'], function () {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload;
        table.render({
            elem: '#test'
            , url: '/test/table/demo1.json'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , defaultToolbar: ['']
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'username', title: '项目名称'}
                , {field: 'sex', title: '申报计划名称'}
                , {field: 'sex', title: '项目成员'}
                , {field: 'sex', title: '负责人'}
                , {field: 'type', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true
        });
        //新建
        $('.add').click(function () {
            creat(0)
        });

        /*新建和编辑的方法*/
        function creat(type, healId) {
            if (type == '0') {
                var title = '新建';
                var url = '/HealthyInfo/insertHealthyInfo'
            } else {
                var title = '编辑';
                var url = '/HealthyInfo/insertHealthyInfo'
            }

            layer.open({
                type: 1,
                title: title,
                btn: ['确定', '取消'],
                shade: 0.5,
                maxmin: true, //开启最大化最小化按钮
                area: ['40%', '80%'],
                content: '<div id="cont" style="margin: 10px">\n' +
                    '        <form class="layui-form" action="">\n' +
                    '            <h3 class="information">【基本信息】</h3>\n' +
                    '            <div class="layui-form-item" style="margin-top: 15px">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">申报计划:</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"\n' +
                    '                               class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">项目来源</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <select name="modules" lay-verify="required" lay-search="">\n' +
                    '                            <option>请选择</option>\n' +
                    '                            <option>教育部</option>\n' +
                    '                            <option>区级</option>\n' +
                    '                        </select>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">项目级别</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <select name="modules" lay-verify="required" lay-search="">\n' +
                    '                            <option>请选择</option>\n' +
                    '                            <option value="1">国际级</option>\n' +
                    '                            <option>国家级</option>\n' +
                    '                            <option>部省级</option>\n' +
                    '                            <option>省专项</option>\n' +
                    '                            <option>厅市级</option>\n' +
                    '                            <option>其他</option>\n' +
                    '                        </select>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">项目分类</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <select name="modules" lay-verify="required" lay-search="">\n' +
                    '                            <option>请选择</option>\n' +
                    '                            <option>教育部</option>\n' +
                    '                            <option>区级</option>\n' +
                    '                        </select>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <div class="layui-form-item layui-form-text">\n' +
                    '                        <label class="layui-form-label">计划描述</label>\n' +
                    '                        <div class="layui-input-inline">\n' +
                    '                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">开始日期</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="date" id="date" lay-verify="date"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">结束日期</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="date" id="date1" lay-verify="date"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" style="margin-top: 15px">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">专家人数课题:</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"\n' +
                    '                               class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">专家评分开始日期</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="date" id="expertdate" lay-verify="date"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">专家评分结束日期</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="text" name="date" id="expertdate1" lay-verify="date"\n' +
                    '                               autocomplete="off" class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">计划状态</label>\n' +
                    '                <div class="layui-input-inline">\n' +
                    '                    <input type="radio" name="sex" value="1" title="未开始" checked="">\n' +
                    '                    <input type="radio" name="sex" value="2" title="评审中">\n' +
                    '                    <input type="radio" name="sex" value="2" title="评审结束">\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item" style="margin-top: 15px">\n' +
                    '                <div class="layui-inline">\n' +
                    '                    <label class="layui-form-label">评分分数:</label>\n' +
                    '                    <div class="layui-input-inline">\n' +
                    '                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off"\n' +
                    '                               class="layui-input">\n' +
                    '                    </div>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '        </form>\n' +
                    '    </div>',
                success:function (res) {
                    //日期
                    laydate.render({
                        elem: '#date'
                        , trigger: 'click'//呼出事件改成click
                    });
                    laydate.render({
                        elem: '#date1'
                        , trigger: 'click'//呼出事件改成click
                    });
                    //日期
                    laydate.render({
                        elem: '#expertdate'
                        , trigger: 'click'//呼出事件改成click
                    });
                    laydate.render({
                        elem: '#expertdate1'
                        , trigger: 'click'//呼出事件改成click
                    });
                    form.render();
                    fileuploadFn('#fileupload', $('#fileAll'));
                },
                yes:function (index) {

                }
            })
        }

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                creat(1)
            }
        });

        $('.tijiao').click(function () {
            layer.open({
                type: 1,
                title: '研究进程',
                btn: ['确定', '取消'],
                shade: 0.5,
                area: ['40%', '80%'],
                content:$('#a'),
                success:function (res) {
                    form.render()
                    laydate.render({
                        elem: '#date'
                    });
                }

            })
        })

        //删除附件
        $(document).on('click', '.deImgs', function () {
            var _this = this;
            var attUrl = $(this).parents('.dech').attr('deUrl');
            layer.confirm('确定删除该附件吗？', function (index) {
                $.ajax({
                    type: 'get',
                    url: '/delete?' + attUrl,
                    dataType: 'json',
                    success: function (res) {

                        if (res.flag == true) {
                            layer.msg('删除成功', {icon: 6, time: 1000});
                            $(_this).parent().remove();
                        } else {
                            layer.msg('删除失败', {icon: 2, time: 1000});
                        }
                    }
                })
            });
        });
    });
</script>